<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>library</title>
    <style>
        li {
            list-style: none;
        }
        
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        
        .container {
            margin-bottom: 15px;
        }
        
        .container>div {
            float: left;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="vueInside">
        <ul>
            <li>
                <div :key='item.id' class="clearfix container" v-for='(item,index) in books'>
                    <div class="bookid">{{item.id}}</div>
                    <div class="bookname">
                        {{item.name}}
                    </div>
                    <div>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</div>
                    <div class="bookwriter">{{item.writer}}</div>
                    <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                    <a href="" @click.prevent='toDel(item.id)'>删除</a>
                </div>
                书名：<input type="text" v-model='name' v-focus>
                <!-- id修改时候禁止修改 添加时候可以修改 -->
                id:<input type="number" v-model.num.lazy='id' :disabled='flag'> 作者：
                <input type="text" v-model='writer'>
                <div>{{tip}}</div>
                <div>{{num}}</div>
                <button class="tiJiao" @click='tiJiao' :disabled='submitFlag'>提交</button>
            </li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 过滤器
    Vue.filter('format', function(value, arg) {
            function dateFormat(date, format) {
                if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                }
                var map = {
                    "M": date.getMonth() + 1, //月份 
                    "d": date.getDate(), //日 
                    "h": date.getHours(), //小时 
                    "m": date.getMinutes(), //分 
                    "s": date.getSeconds(), //秒 
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                    "S": date.getMilliseconds() //毫秒 
                };
                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    } else if (t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(value, arg);
        })
        // 自定义指令
    Vue.directive('focus', {
        inserted: function(el) {
            el.focus();
        }
    })
    var vueShili = new Vue({
        el: '#vueInside',
        data() {
            return {
                books: [],

                name: '',
                id: 3,
                writer: '',
                tip: '提示信息',
                flag: false,
                submitFlag: true,
            }
        },
        methods: {
            yanZheng(val) {
                for (let i = 0; i < this.books.length; i++) {
                    if (val == this.books[i].id) {
                        this.tip = '已存在，请更换!';
                        return false;
                    } else {
                        this.tip = '可以使用'
                    }
                }
            },
            tiJiao: function() {
                if (this.flag) {
                    // 编辑 箭头函数的this是外面一层的this
                    this.books.some(item => {
                        console.log(this);
                        if (item.id == this.id) {
                            item.name = this.name
                            item.writer = this.writer
                                // 终止循环
                            return true;
                        }
                    })
                    this.flag = flase;
                } else {
                    // 添加
                    if (this.tip == '可以使用') {
                        var info = {};
                        info.id = this.id;
                        info.name = this.name;
                        info.writer = this.writer;
                        this.books.push(info);
                        // 重置
                        this.id = 0;
                        this.name = '';
                        this.writer = '';
                    }
                }


            },
            // 修改
            toEdit(id) {
                this.flag = true;
                var thisBook = this.books.filter(function(item) {
                    return id == item.id
                })
                thisBook = thisBook[0]
                this.id = thisBook.id;
                this.name = thisBook.name;
                this.writer = thisBook.writer;
                // thisBook.id = this.id;
                // thisBook.name = this.name;
                // thisBook.writer = this.writer;
                console.log(thisBook);
            },
            // 删除
            toDel(id) {
                // 第一种删除方法
                var thisBook2 = this.books.findIndex(item => {
                    // 必须return，不return则返回-1
                    return item.id == id
                })
                this.books.splice(thisBook2, 1)
                    // 第二种删除方法 反向思维 filter
                    // this.books = this.books.filter(function (item) {
                    //     return item.id != id
                    // })
            },
        },
        watch: {
            id: function(val) {
                this.yanZheng(val);
            },
            name: function(val) {
                this.submitFlag = this.books.some(function(item) {
                    return item.name == val
                })
            }
        },
        computed: {
            num: function() {
                // 必须要return
                // this.num=this.books.length
                return this.books.length
            }
        },
        mounted() {
            var data = [{
                id: 0,
                name: '三国演义',
                writer: '罗本',
                date: 2525609975000,
            }, {
                id: 1,
                name: '红楼梦',
                writer: '曹雪芹',
                date: 2525609975000,
            }, {
                id: 2,
                name: '西游记',
                writer: '吴承恩',
                date: 2525609975000,
            }];
            this.books = data;
        },
    })
</script>

</html>